<!-- 首页导航栏 -->
<template>
    <div class="navbar">
    <div class="tab">
      <div  v-for = "item in tabs.data">
        <input type="radio" :id="item.id" name="navbar" :value="item.id" v-model="id">
        <label :for="item.id">{{item.name}}</label>
      </div>
    </div>
     <div v-for = "item in tabs.data">
      <div v-show = "item.id === id">{{item.name}}</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: ['tabs'],
    data() {
      return {
        id: this.tabs.checked
      };
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .navbar .tab
    height 40px
    color #b3b3b3
    line-height 40px
    display flex
    justify-content space-between
    padding 0 15%
    div
      display inline-block
      text-align center
      label
        height 100%
        display inline-block
        box-sizing border-box
        padding 0px 3px
      input 
        display none
        appearance: none
        &:checked  + label
          color rgb(72,72,72)
          border-bottom 2px solid rgb(72,72,72)
</style>